<!--
 * @Author: 张卓南
 * @Date: 2023-10-21 13:21:25
 * @LastEditTime: 2023-10-21 18:03:50
 * @Description: 
-->
<template>
  <div class="flex justify-center px-8 mt-8">
    <div class="flex flex-col w-full">
      <div class="box p-2">
        <van-card thumb="../../src/assets/出行.png">
          <template #title>
            <div class="title">
              <div>2023-11-01 下班行程</div>
              <div>
                <van-tag
                  round
                  type="primary"
                  :color="
                    [statusEnum.DQR, statusEnum.YTY].includes(result.status)
                      ? 'rgb(18, 183, 106)'
                      : changeColor(result.status)
                  "
                  size="medium"
                  >{{
                    [statusEnum.DQR, statusEnum.YTY].includes(result.status)
                      ? "待出行"
                      : changeStatus(result.status)
                  }}</van-tag
                >
              </div>
            </div>
          </template>
          <template #desc>
            <div class="mt-5">
              <div class="content">
                <div>
                  <div>{{ result.workplace }} > {{ result.homeAddress }}</div>
                  <div>
                    {{ result.loginName }}{{ result.nums }}人 {{ result.up
                    }}{{ result.dan }}
                  </div>
                  <div>出行时间：2023-11-01 09:10</div>
                </div>
                <div
                  v-if="
                    [statusEnum.DQR, statusEnum.YTY].includes(result.status)
                  "
                >
                  <van-tag
                    color="#ffe1e1"
                    text-color="#ad0000"
                    size="large"
                    @click="cancel(index)"
                    >取消</van-tag
                  >
                </div>
              </div>
            </div>
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { Icon } from "@vicons/utils";
import { UserOutlined, MobileOutlined } from "@vicons/antd";
import car from "@/assets/出行.png";
import { useRoute, useRouter } from "vue-router";
import { statusEnum } from "../enums/common.ts";
import { changeStatus, changeColor } from "../utils/is/index.ts";
import { showToast, showSuccessToast } from "vant";

export default defineComponent({
  name: "PieceInfo",
  props: {
    data: Object,
  },

  setup(props, context) {
    const router = useRouter();
    const result = props?.data;
    console.log("resultList", result);
    const jump = () => {
      router.push("/preResult");
    };

    const cancel = (index) => {
      showToast("正在帮您取消行程，请稍后");
      setTimeout(() => {
        result.status = statusEnum.YQX;
        showSuccessToast("取消成功");
      }, 350);
    };
    return { car, jump, result, cancel, statusEnum, changeStatus, changeColor };
  },
});
</script>

<style scoped lang="less">
:deep(.van-card) {
  background: white;
  padding: 0;
}
.box {
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.title {
  display: flex;
  justify-content: space-between;
}
.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
